<template>
  <div>
    <a-skeleton :loading="skeLoading" active :paragraph="{ rows: 20 }">
      <div>

        <a-card title="出单数据" :bordered="false">
          <div slot="extra">
            <a-radio-group v-model="status" @change="timeBtnChange()">
              <a-radio-button value="today">今天</a-radio-button>
              <a-radio-button value="month">本月</a-radio-button>
              <a-radio-button value="lastMonth">上月</a-radio-button>
            </a-radio-group>
            <a-range-picker @change="timeChange" :style="{width: '256px',margin:'0 0 0 16px'}" />
          </div>
          <a-card :bordered="false">
            <a-row>
              <a-col :sm="4" :xs="24">
                <head-info title="预估金额" :content="dateKpi.estimate_cos_price" :bordered="true" />
              </a-col>
              <a-col :sm="4" :xs="24">
                <head-info title="预估服务费" :content="dateKpi.estimate_commission" :bordered="true" />
              </a-col>
              <a-col :sm="4" :xs="24">
                <head-info title="结算金额" :content="dateKpi.actual_cos_price" :bordered="true" />
              </a-col>
              <a-col :sm="4" :xs="24">
                <head-info title="结算服务费" :content="dateKpi.actual_commission" :bordered="true" />
              </a-col>
              <a-col :sm="4" :xs="24">
                <head-info title="通过商品" :content="dateKpi.pass_num" :bordered="true" />
              </a-col>
              <a-col :sm="4" :xs="24">
                <head-info title="被翘商品" :content="dateKpi.loss_num" />
              </a-col>
            </a-row>
          </a-card>
        </a-card>
      </div>
    </a-skeleton>
    <br />
    <a-card class="card" title="组员管理" :bordered="false">
      <a-row class="form-row" :gutter="16">
        <a-col :lg="2" :md="8" :sm="24">
          <a-form-item>
            <a-input
              v-model="username"
              placeholder="员工姓名"
            />
          </a-form-item>
        </a-col>
        <a-col :lg="4" :md="8" :sm="24">
          <a-form-item>
            <div>
              <a-button @click="join(1)" type="primary">审核通过</a-button>
              <a-button @click="join(2)" style="margin-left:10px">加入小组</a-button>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
      <a-table
        :columns="columns"
        :dataSource="memberList"
        :rowKey="memberList => memberList.id"
        :pagination="false"
        :loading="loading"
      >
        <div slot="action" slot-scope="row">
          <!-- <a-button @click="getDateKpi(row.id)" type="link">查看出单数据</a-button> -->
          <a-button @click="edit(row.id,1)" type="link">移出小组</a-button>
          <a-button @click="edit(row.id,2)" type="link">员工离职</a-button>
        </div>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { headmanData } from '@/api/group.js'
import { memberList, editMember, joinMember } from '@/api/headman'
import HeadInfo from '@/components/tools/HeadInfo'
import moment from 'moment'
const columns = [
  {
    title: '序号',
    customRender: (text, row, index) => {
      return index + 1
    }
  },
  {
    title: '姓名',
    dataIndex: 'user'
  },
  {
    title: '入职时间',
    dataIndex: 'useTime'
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'Ranking',
  components: {
    HeadInfo,
    moment
  },
  data () {
    return {
      description: '管理本小组成员。',
      memberList: [],
      columns,
      loading: false,
      skeLoading: true,
      username: '',
      dateKpi: [],
      status: 'today',
      userId: ''
    }
  },
  created () {
    this.getMemberList()
    this.dateString = [moment().format('YYYY-MM-DD'), moment(new Date().toLocaleDateString()).format('YYYY-MM-DD')]
    this.getDateKpi()
  },
  methods: {
    timeBtnChange () {
      if (this.status === 'today') {
        this.dateString = [moment().format('YYYY-MM-DD'), moment(new Date().toLocaleDateString()).format('YYYY-MM-DD')]
      } else if (this.status === 'month') {
        this.dateString = [moment().startOf('month').format('YYYY-MM-DD'), moment().endOf('month').format('YYYY-MM-DD')]
      } else {
        this.dateString = [moment().month(moment().month() - 1).startOf('month').format('YYYY-MM-DD'), moment().month(moment().month() - 1).endOf('month').format('YYYY-MM-DD')]
      }
      this.getDateKpi()
    },
    timeChange (date, dateString) {
      this.status = ''
      this.dateString = dateString
      this.getDateKpi()
    },
    getDateKpi (userId) {
      this.cardLoading = true
      this.userId = userId
      headmanData({
        start: this.dateString[0],
        end: this.dateString[1],
        userId: this.userId
      })
        .then(res => {
          this.dateKpi = res.result
          this.cardLoading = false
        })
        .catch(() => {
          this.cardLoading = false
        })
    },
    getMemberList () {
      this.loading = true
      memberList({})
        .then(res => {
          this.memberList = res.result
          this.skeLoading = false
          this.loading = false
        })
        .catch(err => {
          console.log(err)
          this.skeLoading = false
          this.loading = false
        })
    },
    edit (userId, type) {
      editMember({ userId: userId, type: type })
        .then(res => {
          this.$message.success(res.message)
          this.getMemberList()
        })
        .catch(err => {
          console.log(err)
          this.$message.success('网络错误')
        })
    },
    join (type) {
      if (this.username === '') {
        this.$message.error('请填写员工姓名')
      } else {
        joinMember({ username: this.username, type: type })
          .then(res => {
            this.$message.success(res.message)
            this.getMemberList()
          })
          .catch(err => {
            console.log(err)
            this.$message.success('网络错误')
          })
      }
    }
  }
}
</script>
